<template>
  <div class="navigation">
    <el-menu mode="horizontal" @select="changeSidebar">
      <el-submenu index="1" style="float: right; margin-right: 30px">
        <template slot="title"
          ><span style="font-size: 1.3em">{{ username }}</span></template
        >
        <el-menu-item index="/orderList">我的订单</el-menu-item>
        <el-menu-item index="/goodList">产品列表</el-menu-item>
        <el-menu-item index="logout" @click.native="logout"
          >退出登录</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Navigation",
  computed: {
    ...mapState({
      username: (state) => state.login.username,
    }),
  },
  methods: {
    changeSidebar(path, index) {
      if (path !== "logout") this.$router.push(path);
    },

    async logout() {
      this.$confirm("确定退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("Logout").then(() => {
            this.$message.success("退出成功!");
            location.href = "/login";
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: 80px !important;
}
</style>